<template>
  <view>
    <view id="bcid">
      <view style="height: 40%"></view>
      <view class="tip" v-if="showMask">...载入中...</view>
    </view>
  </view>
</template>
<script>
  let scan = null;
  export default {
    data() {
      return {
        flash: false, //是否打开摄像头
        userIdInfo: "",
        tokenInfo: "",
        showMask: true,
        type: null,
      };
    },
    onShow(event) {
      this.showMask = true;
      setTimeout(() => {
        this.showMask = false;
      }, 100);
    },
    onLoad(event) {
      this.type = event.type;
      setTimeout(() => {
        this.tokenInfo = uni.getStorageSync("token");
        var pages = getCurrentPages();
        var page = pages[pages.length - 1];
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(true); //全屏
        var currentWebview = page.$getAppWebview();
        this.createBarcode(currentWebview); //创建二维码窗口
        this.createView(currentWebview); //创建操作按钮及tips界面
        // #endif
      }, 100);
    },
    methods: {
      // 创建二维码窗口
      createBarcode(currentWebview) {
        scan = new plus.barcode.Barcode(
          "bcid",
          [plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13],
          {
            scanbarColor: "#1DA7FF",
            frameColor: "#1DA7FF",
          }
        );
        scan.onmarked = this.onmarked;
        currentWebview.append(scan);
        scan.start({
          conserve: true,
          filename: "_doc/barcode/",
        });
      },
      // 扫码成功回调
      async onmarked(type, result, file) {
        if (result) {
          // if (this.type === "ticket") {
          // result='PH010190012023022200010'
          if (result.indexOf("PH") != -1) {
            let results = result.split("PH");
            this.$tab.navigateTo(
              `/pages/home/ticketdetail?ticketCode=` + results[1]
            );
          } else if (result.indexOf("CS") != -1) {
            let results = result.split("CS");
            this.$tab.navigateTo(
              `/pages/home/placecode?ticketCode=` + results[1]
            );
          } else {
            this.$modal.msg("二维码未查到信息");
            setTimeout(() => {
              scan.close();
              // 返回之前页面
              this.$tab.navigateBack();
            }, 500);
          }
        }
      },
      // 创建操作按钮及tips
      createView(currentWebview) {
        // 创建返回原生按钮
        var backVew = new plus.nativeObj.View(
          "backVew",
          {
            top: "0px",
            left: "0px",
            height: "40px",
            width: "100%",
          },
          [
            {
              tag: "img",
              id: "backBar",
              src: "static/backBar.png",
              position: {
                top: "10px",
                left: "20px",
                width: "35px",
                height: "35px",
              },
            },
          ]
        );

        // 创建打开手电筒的按钮
        var scanBarVew = new plus.nativeObj.View(
          "scanBarVew",
          {
            top: "60%",
            left: "40%",
            height: "10%",
            width: "20%",
          },
          [
            {
              tag: "img",
              id: "scanBar",
              src: "static/scanBar.png",
              position: {
                width: "28%",
                left: "36%",
                height: "30%",
              },
            },
            {
              tag: "font",
              id: "font",
              text: "轻触照亮",
              textStyles: {
                size: "10px",
                color: "#ffffff",
              },
              position: {
                width: "80%",
                left: "10%",
              },
            },
          ]
        );

        backVew.interceptTouchEvent(true);
        currentWebview.append(backVew);
        backVew.addEventListener(
          "click",
          function (e) {
            //返回按钮
            uni.navigateBack({
              delta: 1,
            });
            barcode.close();
            plus.navigator.setFullscreen(false);
          },
          false
        );

        // 创建展示类内容组件
        scanBarVew.interceptTouchEvent(true);
        currentWebview.append(scanBarVew);
        var temp = this;
        scanBarVew.addEventListener(
          "click",
          function (e) {
            //点亮手电筒
            temp.flash = !temp.flash;
            if (temp.flash) {
              scanBarVew.draw([
                {
                  tag: "img",
                  id: "scanBar",
                  src: "static/yellow-scanBar.png",
                  position: {
                    width: "28%",
                    left: "36%",
                    height: "30%",
                  },
                },
                {
                  tag: "font",
                  id: "font",
                  text: "轻触照亮",
                  textStyles: {
                    size: "14px",
                    color: "#ffffff",
                  },
                  position: {
                    width: "80%",
                    left: "10%",
                  },
                },
              ]);
            } else {
              scanBarVew.draw([
                {
                  tag: "img",
                  id: "scanBar",
                  src: "static/scanBar.png",
                  position: {
                    width: "28%",
                    left: "36%",
                    height: "30%",
                  },
                },
                {
                  tag: "font",
                  id: "font",
                  text: "轻触照亮",
                  textStyles: {
                    size: "14px",
                    color: "#ffffff",
                  },
                  position: {
                    width: "80%",
                    left: "10%",
                  },
                },
              ]);
            }
            if (scan) {
              scan.setFlash(temp.flash);
            }
          },
          false
        );
      },
    },
    onBackPress() {
      // #ifdef APP-PLUS
      // 返回时退出全屏
      // barcode.close();
      plus.navigator.setFullscreen(false);
      // #endif
    },
    onUnload() {
      plus.navigator.setFullscreen(false);
    },
  };
</script>

<style scoped>
  #bcid {
    width: 100%;
    position: fixed;
    top: 44px;
    bottom: 0px;
    height: 95%;
    text-align: center;
    background-color: #000000;
    z-index: 1;
  }

  .tip {
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0px -1px #103e5c;
  }
</style>